<template>
  <div>
    <div v-for="(item, index) in dataList" style="margin: 10px;">
      <div :style="style" style="margin: 1%; display: flex; flex-wrap: wrap;">
        <span style="margin-right: 5%">盘号：{{item.ph}}</span>
        <span style="margin-right: 5%">总量：{{item.zlConvert}}</span>
        <span style="margin-right: 5%">总条数：{{item.zts}}</span>
        <span v-if="isType=='3'" style="margin-right: 1%">
          载体：
          <el-select v-model="ztId[index]" @change="changeZt(index)">
            <el-option v-for="dict in ztOption" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </span>
        <span v-if="isType=='3'" style="margin-right: 5%">
          <el-button type="primary" icon="el-icon-download" plain @click="downLoad(item, index)">下载</el-button>
        </span>
        <span v-if="isType=='3' && isShow" style="margin-right: 5%">挂载路径：{{datainfo.savePath}}</span>
        <span v-if="isType=='3' && isShow">剩余容量：{{datainfo.surplusConvert}}</span>
      </div>
      <el-table :data="item.List" border height="200">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="档案门类" align="center" prop="categoryName" />
        <el-table-column label="档号" align="center" prop="dh">
          <template slot-scope="scope">
            <span>{{ scope.row.dh == 'null' || scope.row.dh == null ? '' : scope.row.dh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据包大小" align="center" prop="docFileSizeConvert" />
      </el-table>
    </div>
  </div>
</template>

<script>
import {confirm, getZt} from "@/api/archive/filesManage/diskManageMenu";
import axios from "axios";
import {getToken} from "@/utils/auth";
import {renderAsync} from "docx-preview";

export default {
  name: "zpPlan",
  props: ['isType'],
  data() {
    return {
      dataList: [],
      style: '',
      ztId: [],
      ztOption: [],
      datainfo: {},
      isShow: false
    }
  },
  methods: {
    init(val) {
      this.getZtOption()
      this.ztId = []
      if (this.$store.getters.size == 'small') {
        this.style = 'font-size: 12px; line-height: 32px'
      } else {
        this.style = 'font-size: 14px; line-height: 36px'
      }
      this.dataList = []
      for (let i = 0; i < val.length; i++) {
        const result = Object.keys(val[i]).reduce((obj, item) => {
          const keyValuePairs = item.slice(1, -1).split(', ');
          keyValuePairs.forEach(pair => {
            const [key, value] = pair.split('=');
            obj[key] = value;
          });
          return obj;
        }, {});
        result.List = JSON.parse(JSON.stringify([].concat(...Object.values(val[i]))))
        this.dataList.push(result)
      }
    },
    getZtOption() {
      getZt().then(response=>{
        this.ztOption = response.data.map(item => {
          return {
            value: item.ztId,
            label: item.code
          }
        })
      })
    },
    changeZt(index) {
      confirm(this.ztId[index]).then(res=>{
        this.datainfo = res.data
        this.isShow = true
      })
    },
    // 下载
    downLoad(val, index) {
      if (this.ztId[index] == undefined) {
        this.$modal.msgWarning('请选择载体')
      } else {
        if (parseFloat(val.zl) < parseFloat(this.datainfo.surplus)) {
          this.form = {
            zpjlId: val.zpjlId,
            ztId: this.ztId[index]
          }
          // this.download('/archive/yqZpgz/zpxz', {
          //   ...this.form
          // })
          axios({
            method: 'POST',
            url: process.env.VUE_APP_BASE_API + `/archive/yqZpgz/zpxz`,
            params: {
              zpjlId: val.zpjlId,
              ztId: this.ztId[index]
            },
            headers: {
              Authorization: "Bearer " + getToken()
            },
            // responseType: 'arraybuffer' // 更改responseType类型为 arraybuffer
          }).then(res => {
            console.log(res)
            if (res.data.msg=='下载成功！'){
              this.$modal.msgSuccess(res.data.msg)
            }else {
              this.$modal.msgError(res.data.msg)
            }
          }).catch(err => {
            this.$modal.msgError('下载失败!')
          })
        } else {
          this.$modal.msgWarning('载体剩余容量不足')
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
